<template>
  <div class="poster-page">
    <div class="poster-preview-wrapper">
      <div
        id="poster-preview"
        class="poster-preview"
        :style="{ backgroundImage: `url(${backgroundUrl})` }"
      >
        <img
          v-if="posterDiy.avatar.show"
          :src="posterDiy.avatar.src"
          class="poster-element avatar"
          :style="avatarStyle"
          alt="Avatar"
        />
        <div v-if="posterDiy.nickname.show" class="poster-element nickname" :style="nicknameStyle">
          {{ posterDiy.nickname.content }}
        </div>
        <img
          v-if="posterDiy.qrCode.show"
          :src="posterDiy.qrCode.src"
          class="poster-element qrcode"
          :style="qrCodeStyle"
          alt="QR Code"
        />
      </div>
    </div>

    <div class="settings-panel">
      <el-alert
        style="width: 500px; margin-bottom: 20px"
        title="如果有修改，请点击保存按钮更新数据"
        type="primary"
        :closable="false"
      />
      <div class="setting-block">
        <span class="setting-label">背景图</span>
        <div class="background-uploader" @click="showImageChooseDialog = true">
          <div v-if="backgroundUrl" class="background-preview">
            <img :src="backgroundUrl" class="background-image" />
            <span class="change-tip">更换</span>
          </div>
          <div v-else class="uploader-placeholder">
            <el-icon><Plus /></el-icon>
          </div>
        </div>
      </div>

      <div class="element-selector">
        <div
          class="selector-item"
          :class="{ active: activeTabName === 'avatar' }"
          @click="activeTabName = 'avatar'"
        >
          <img class="selector-icon" src="@/assets/img/poster-avatar.png" />
          <span>头像</span>
        </div>
        <div
          class="selector-item"
          :class="{ active: activeTabName === 'nickname' }"
          @click="activeTabName = 'nickname'"
        >
          <img class="selector-icon" src="@/assets/img/poster-nickname.png" />
          <span>昵称</span>
        </div>
        <div
          class="selector-item"
          :class="{ active: activeTabName === 'qrCode' }"
          @click="activeTabName = 'qrCode'"
        >
          <img class="selector-icon" src="@/assets/img/poster-qrcode.png" />
          <span>二维码</span>
        </div>
      </div>

      <el-card v-if="currentElementConfig" shadow="never">
        <template #header>
          <div class="config-title">{{ currentConfigTitle }}设置</div>
        </template>
        <el-form label-width="80px" label-position="left">
          <el-form-item label="组件显示">
            <el-radio-group v-model="currentElementConfig.show">
              <el-radio :value="true">开启</el-radio>
              <el-radio :value="false">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="大小">
            <el-slider v-model="currentElementConfig.size" :min="10" :max="300" show-input />
          </el-form-item>
          <el-form-item label="上间距">
            <el-slider v-model="currentElementConfig.top" :min="0" :max="600" show-input />
          </el-form-item>
          <el-form-item label="左间距">
            <el-slider v-model="currentElementConfig.left" :min="0" :max="350" show-input />
          </el-form-item>
        </el-form>
      </el-card>

      <el-button
        type="primary"
        style="margin-top: 10px"
        :loading="submitLoading"
        @click="handleSave"
        >保存</el-button
      >
    </div>

    <image-selected-dialog
      v-if="showImageChooseDialog"
      :single-type="true"
      :operation-type="false"
      :show-image-choose-dialog="showImageChooseDialog"
      @close-dialog="handleCloseImageDialog"
    ></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, CSSProperties } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'
  import { settingUpdate } from '@/api/marketing'

  const props = defineProps<{
    id?: string
    wxImg?: string
    diyData?: string | null
  }>()

  interface PosterElementConfig {
    show: boolean
    size: number
    top: number
    left: number
    src?: string
    content?: string
  }

  const backgroundUrl = ref('')
  const showImageChooseDialog = ref(false)
  const submitLoading = ref(false)

  const posterDiy = reactive<{
    avatar: PosterElementConfig
    nickname: PosterElementConfig
    qrCode: PosterElementConfig
  }>({
    avatar: {
      show: true,
      size: 80,
      top: 50,
      left: 135,
      src: 'https://image.lutongjiakao.com/system/52ac241e95c148e7b1e5383e4902b32b.png'
    },
    nickname: {
      show: true,
      size: 20,
      top: 150,
      left: 135,
      content: '用户昵称'
    },
    qrCode: {
      show: true,
      size: 120,
      top: 450,
      left: 115,
      src: 'https://image.lutongjiakao.com/system/da8eebd1fe3a498b85ad606f14bed39a.png'
    }
  })

  const activeTabName = ref<'avatar' | 'nickname' | 'qrCode'>('avatar')

  const titleMap = {
    avatar: '头像',
    nickname: '昵称',
    qrCode: '二维码'
  }
  const currentConfigTitle = computed(() => titleMap[activeTabName.value])

  const currentElementConfig = computed<PosterElementConfig | null>(() => {
    return posterDiy[activeTabName.value] || null
  })

  const avatarStyle = computed(
    (): CSSProperties => ({
      position: 'absolute',
      top: `${posterDiy.avatar.top}px`,
      left: `${posterDiy.avatar.left}px`,
      width: `${posterDiy.avatar.size}px`,
      height: `${posterDiy.avatar.size}px`,
      borderRadius: '50%'
    })
  )

  const nicknameStyle = computed(
    (): CSSProperties => ({
      position: 'absolute',
      top: `${posterDiy.nickname.top}px`,
      left: `${posterDiy.nickname.left}px`,
      width: 'fit-content',
      fontSize: `${posterDiy.nickname.size}px`,
      textAlign: 'center',
      color: '#333333',
      fontWeight: 'bold'
    })
  )

  const qrCodeStyle = computed(
    (): CSSProperties => ({
      position: 'absolute',
      top: `${posterDiy.qrCode.top}px`,
      left: `${posterDiy.qrCode.left}px`,
      width: `${posterDiy.qrCode.size}px`,
      height: `${posterDiy.qrCode.size}px`
    })
  )

  async function handleSave() {
    try {
      submitLoading.value = true
      const res = await settingUpdate({
        id: props.id,
        wxImg: backgroundUrl.value,
        shareDiy: JSON.stringify(posterDiy)
      })
      if (res.code === '00000') {
        ElMessage.success('保存成功')
      }
    } catch {
    } finally {
      submitLoading.value = false
    }
  }

  function handleCloseImageDialog(value: any) {
    if (value) {
      backgroundUrl.value = value.fileUrl
    }
    showImageChooseDialog.value = false
  }

  onMounted(() => {
    if (props.wxImg) {
      backgroundUrl.value = props.wxImg
    }
    if (props.diyData) {
      const data = JSON.parse(props.diyData) as Partial<typeof posterDiy>
      Object.assign(posterDiy, data)
    }
  })
</script>

<style scoped lang="scss">
  .poster-page {
    display: flex;
    gap: 20px;
  }

  .poster-preview-wrapper {
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background-color: #f0f2f5;
    border-radius: 8px;
    height: 100%;

    .poster-preview {
      width: 350px;
      height: 600px;
      background-color: #ffffff;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
      border: 1px solid #dcdfe6;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .poster-element {
        box-sizing: border-box;

        &.avatar {
          object-fit: cover;
          border: 2px solid white;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }
      }
    }
  }

  .settings-panel {
    flex: 1;
    padding: 10px 20px;

    .setting-block {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;

      .setting-label {
        width: 60px;
        margin-right: 10px;
        font-size: 14px;
        color: #606266;
        line-height: 32px;
      }
    }

    .element-selector {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;

      .selector-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        font-size: 14px;
        color: #606266;

        .selector-icon {
          width: 40px;
          height: 40px;
          margin-bottom: 5px;
        }

        &:hover {
          border-color: var(--el-color-primary);
          color: var(--el-color-primary);
        }

        &.active {
          border-color: var(--el-color-primary);
          color: var(--el-color-primary);
          font-weight: bold;
        }
      }
    }

    .config-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }

    .background-uploader {
      .uploader-placeholder {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        transition: border-color 0.3s;

        &:hover {
          border-color: var(--el-color-primary);
        }

        .el-icon {
          font-size: 28px;
          color: #8c939d;
        }
      }

      .background-preview {
        width: 100px;
        height: 100px;
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #dcdfe6;
        cursor: pointer;

        .background-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .change-tip {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          text-align: center;
          font-size: 12px;
          padding: 2px 0;
          opacity: 0;
          transition: opacity 0.3s;
        }

        &:hover {
          .change-tip {
            opacity: 1;
          }
        }
      }
    }
  }
</style>
